<template>
	<view class="container">
		<view class="box">
			<view class="boxTop">
				<van-field v-model="oldPwd" 
				  label="旧密码:" 
				  :right-icon="showOldPwd ? 'eye':'closed-eye'" 
					:type="showOldPwd ? 'text' : 'password'" 
					@click-right-icon="showOldPwd = !showOldPwd" 
					placeholder="请输入旧密码" />
				<van-field v-model="newPwd" 
				  label="新密码:" 
					:right-icon="showNewPwd ? 'eye':'closed-eye'" 
					:type="showOldPwd ? 'text' : 'password'" 
					@click-right-icon="showNewPwd = !showNewPwd" 
					placeholder="请输入新密码" />
				<van-field v-model="confirmPwd" 
				  label="确认密码:" 
					:right-icon="showConfirmPwd ? 'eye':'closed-eye'" 
					:type="showOldPwd ? 'text' : 'password'" 
					@click-right-icon="showConfirmPwd = !showConfirmPwd" 
					placeholder="请确认密码" />
			</view>
			<button type="primary" @click="confirmChange()">确认</button>
		</view>
		<view class="tips">注意：密码格式为数字和字母至少八位!</view>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import {useStore} from 'vuex'
		const oldPwd = ref(''),newPwd = ref(''),confirmPwd = ref('');
		const showOldPwd = ref(false),showNewPwd = ref(false),showConfirmPwd = ref(false);
		const store = useStore();
		const confirmChange = () =>{
			const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/
			if(!oldPwd.value){
				uni.showToast({
					icon:'none',
					title:'请输入旧密码'
				})
				return
			}
			if(!newPwd.value){
				uni.showToast({
					icon:'none',
					title:'请输入新密码'
				})
				return
			}
			if(!confirmPwd.value){
				uni.showToast({
					icon:'none',
					title:'请确认新密码'
				})
				return
			}
			if(oldPwd.value != store.state.pwd){
				uni.showToast({
					icon:'none',
					title:'旧密码输入错误'
				})
				return
			}
			if(!reg.test(newPwd.value) || !reg.test(confirmPwd.value)){
				uni.showToast({
					icon:'none',
					title:'密码必须由数字和字母组成，且新密码长度至少为8位'
				})
				return
			}
		}
</script>

<style lang="scss" scoped>
	.container{
		height: 100%;
		border-top: 1px solid #f5f5f5;;
		.box{
			margin:45% 45rpx 0;
		  .boxTop{
				padding: 15rpx 15rpx 0;
				border-radius: 15rpx;
				background-color: #fff;
			}
			button {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				margin: 190rpx auto 0;
				font-size: 32rpx;
				background-color:#EE9845;
				border: none;
			}
		}
	}
	.tips{
		width: 100%;
		text-align: center;
		position: fixed;
		bottom: 130rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 28rpx;
		color:#F39A42;
	}
	:deep(.van-cell){
		border-bottom: 1px solid #efefef;
	}
</style>
